<template>
  <div class="wrapper">
    <v-head></v-head>
    <v-sidebar></v-sidebar>
    <div class="content-box" :class="{'content-collapse':collapse}">
      <v-tags @refresh="thatRefresh"></v-tags>
      <div class="content">
        <transition name="move" mode="out-in">
          <keep-alive :include="includes">
            <router-view v-if="isRouterAlive"></router-view>
          </keep-alive>
        </transition>
        <el-backtop target=".content"></el-backtop>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';
import bus from './bus';
import qs from "qs";
export default {
  data() {
    return {
      includes: [
        'ProjectManageTest',
        'projectTask',
        'needEdit'
      ],
      savePreRouter: [],
      needKeeps: [
        {
          name: 'projectTask',
          path: '/view/project/task'
        },
        {
          name: 'ProjectManageTest',
          path: '/view/project/test'
        },
        {
          name: 'needEdit',
          path: 'project/neededit'
        }
      ],
      isRouterAlive: true,
      collapse: true
    };
  },
  components: {
    vHead,
    vSidebar,
    vTags
  },
  methods: {
    thatRefresh () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
        if (this.$route.path.indexOf('/view/project/task') >= 0) {
          bus.$emit('showTaskByIdClose', '')
        }
      })
    }
  },
  watch: {
    '$route': {
      immediate: true,
      handler (n, o) {
        let path = n.path
        if (n.path === '/view/project/neededit') {
          let a = this.$route.query
          let b = qs.stringify(a, { indices: false })
          path += `?${b}`
        }
        // console.log(path)
        let pathIndex = this.needKeeps.findIndex((value, index, arr) => {
          return path.indexOf(value.path) >= 0
        })
        // console.log(pathIndex);
        if (pathIndex >= 0) {
          if (this.savePreRouter.findIndex(it => it.indexOf(this.needKeeps[pathIndex].path) >= 0) < 0) {
            this.savePreRouter.push(path)
          }
          if (this.savePreRouter.indexOf(path) >= 0) {
            if (this.includes.indexOf(this.needKeeps[pathIndex].name) < 0) {
              this.includes.push(this.needKeeps[pathIndex].name)
            }
          } else {
            let index1 = this.includes.indexOf(this.needKeeps[pathIndex].name)
            let a = this.includes.splice(index1, 1)
            let b = this.savePreRouter.findIndex(it => it.indexOf(this.needKeeps[pathIndex].path) >= 0)
            if (b >= 0) {
              this.savePreRouter.splice(b, 1)
            }
            if (this.savePreRouter.indexOf(path) < 0) {
              this.savePreRouter.push(path)
            }
            this.$nextTick(_ => {
              this.includes.push(...a)
            })
          }
        }
        // console.log(this.includes)
      }
    }
  },
  created() {
    bus.$on('collapse-content', msg => {
      this.collapse = msg;
    });

    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    bus.$on('tags', msg => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    });
  }
};
</script>
